<!-- 主页 -->
<template>
  <view>
    <!-- 顶部标题背景栏 -->
    <view class="user-bar" :style="{paddingTop: systemBarHeight + 'px'}">
      <view class="duorou-title" style="margin-top:30px;">多肉病虫害检测</view>
      <view class="area-distribution">
        <view class="small-title">
          <view >3000</view>
          <view class="bottom">基地面积(亩)</view>
        </view>
        <view class="small-title">
          <view>9</view>
          <view class="bottom">地块数量(块)</view>
        </view>
      </view>
    </view>

    <!-- 报警消息弹框 -->
    <uni-popup ref="alertPopup" type="top">
      <uni-popup-dialog 
        type="error" 
        title="报警消息" 
        :content="alertMessage" 
        :duration="0" 
        @confirm="closeAlert"
      ></uni-popup-dialog>
    </uni-popup>

    <!-- tab-bar分类栏 -->
    <view class="menu-card-project">
      <view class="item" >
        <view class="item-inner" @click="gotoDapengPage('kgNpk')">
          <view>
            <image :src="API_BASE_URL+'/admin/sys-file/local/35f04f83813641759e0b27ea7c37c099.png' "
			style="width: 90rpx;height: 90rpx;"></image>
          </view>
          <view style="font-size: 14pt; ">土壤监测</view>
        </view>

        <view class="item-inner" @click="gotoDapengPage('kgBotCam')">
          <view>
            <image :src="API_BASE_URL+'/admin/sys-file/local/4e2291ed72394a4b94639229c2a9ae07.png'" 
			style="width: 90rpx;height: 90rpx;"></image>
          </view>
          <view style="font-size: 14pt; ">病虫害识别</view>
        </view>
        <view  class="item-inner" @click="gotoDapengPage('testShengZhang')">
          <view>
            <image :src="API_BASE_URL+'/admin/sys-file/local/d9e2b9084b264a04b18175fd583ccab4.png'" 
			style="width: 90rpx;height: 90rpx;;"></image>
          </view>
          <view style="font-size: 14pt; ">生长繁育</view>
        </view>
      </view>
      <view class="item">
        <view  class="item-inner">
          <view>
            <image :src="API_BASE_URL+'/admin/sys-file/local/612c5ce82604467f94042fc71ade7f9f.png'" 
			style="width: 90rpx;height: 90rpx;"></image>
          </view>
          <view style="font-size: 14pt; ">数据采集</view>
        </view>

        <view class="item-inner">
          <view>
            <image :src="API_BASE_URL+'/admin/sys-file/local/9686d6a659e14e988e77a7bf97d03b02.png'" 
			style="width: 90rpx;height: 90rpx;"></image>
          </view>
          <view style="font-size: 14pt; ">气象站</view>
        </view>
        <view class="item-inner">
          <view>
            <image :src="API_BASE_URL+'/admin/sys-file/local/1d3b113277944893948d311c9828d581.png'" 
			style="width: 90rpx;height: 90rpx;"></image>
          </view>
          <view style="font-size: 14pt; ">监控设备</view>
        </view>
      </view>
    </view>

    <!-- 轮播图 -->
    <view>
      <view class="swiper-container">
        <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" >
          <swiper-item>
            <view class="swiper-item">
              <image :src="API_BASE_URL+'/admin/sys-file/local/5ca2abb2103141f6a872f19761d3d561.png'" mode="aspectFill"></image>
            </view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item">
              <image :src="API_BASE_URL+'/admin/sys-file/local/a3b76e0353ca4aedaa7c9257adcf2778.png'"  mode="aspectFill"></image>
            </view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item">
              <image :src="API_BASE_URL+'/admin/sys-file/local/dd412f985fa448bd910b257a0d8375d2.png'" mode="aspectFill"></image>
            </view>
          </swiper-item>
		  <swiper-item>
		    <view class="swiper-item">
		      <image :src="API_BASE_URL+'/admin/sys-file/local/840b1c7e2bfc4a358dce94baeb513572.png'" mode="aspectFill"></image>
		    </view>
		  </swiper-item>
        </swiper>
      </view>
    </view>

    <!-- 病虫害统计图 -->
    <view class="tongji">
      <view>
        <view class="tonngjibingchonghai">病虫害统计</view>
      </view>
      <view>
        <view class="charts-boxbingchong">
          <qiun-data-charts
              type="ring"
              :opts="bingchongopts"
              :chartData="chartDatabingchong"
          />
        </view>
      </view>
    </view>




  </view>
</template>

<script  setup>
import {ref} from "vue"
import { onMounted, onUnmounted } from 'vue'
import {API_BASE_URL} from "@/env_config.js"

// 报警消息相关
const alertMessage = ref('');
const alertPopup = ref(null);
const messageQueue = ref([]) // 消息队列
let isShowingAlert = false // 标记当前是否正在显示弹窗
let popupInstance = null

// 显示弹窗
const showAlert = () => {
  if (messageQueue.value.length === 0 || isShowingAlert) return
    
  isShowingAlert = true
  const currentMessage = messageQueue.value.shift()
  alertMessage.value = `${currentMessage.messageType}\n${currentMessage.messageDescribe}`
  alertPopup.value?.open();
  
  // 创建新的弹窗实例
    popupInstance = alertPopup.value.open('top')
    
    // 3秒后自动关闭并显示下一条
    setTimeout(() => {
      closeAlert()
    }, 3000)
};

// 关闭弹窗时触发下一条消息
const closeAlert = () => {
  if (popupInstance) {
    popupInstance.close()
  }
  
  isShowingAlert = false
  // 延迟一小段时间再显示下一条，确保动画完成
  setTimeout(() => {
    showAlert()
  }, 300)
}

// 监听WebSocket消息
onMounted(() => {
  uni.$on('websocket:message', (message) => {
	console.log("home:", message);
    // 将新消息加入队列
      messageQueue.value.push(message)
      // 如果没有正在显示的弹窗，立即显示
      if (!isShowingAlert) {
        showAlert()
      }
  });
});


/**
 * 轮播图
 */
const indicatorDots=ref(true);
const autoplay=ref(true);
const interval=ref(2000);
const duration=ref(500);


/**
 * 计算顶部到导航栏的距离
 */
const systemBarHeight=ref(0);
const getSysteminfo =() =>  {
  uni.getSystemInfo({
    success: res => {
      console.log(res.statusBarHeight)
      systemBarHeight.value = res.statusBarHeight;
    }
  });
}
getSysteminfo();

/**
 *
 */
const chartDatabingchong=ref({})
const bingchongopts=ref({
  rotate: false,
  rotateLock: false,
  color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
  padding: [5,5,5,5],
  dataLabel: true,
  enableScroll: false,
  legend: {
    show: true,
    position: "bottom",
    lineHeight: 25
  },
  title: {
    name: "病虫害率",
    fontSize: 18,
    color: "#666666"
  },
  subtitle: {
    name: "10%",
    fontSize: 25,
    color: "#000000"
  },
  extra: {
    ring: {
      ringWidth: 40,  // 调整圆环的宽度
      activeOpacity: 0.5,
      activeRadius: 10,
      offsetAngle: 0,
      labelWidth: 15,
      border: true,
      borderWidth: 3,
      borderColor: "#FFFFFF",
      linearType: "custom"
    }
  }
})

function getServerData() {
  //模拟从服务器获取数据时的延时
  setTimeout(() => {
    //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
    let res = {
      series: [
        {
          data: [{"name":"健康多肉","value":50},{"name":"病虫害1","value":30},{"name":"病虫害2","value":20},{"name":"病虫害3","value":18}]
        }
      ]
    };
    chartDatabingchong.value = JSON.parse(JSON.stringify(res));
  }, 500);
}

getServerData();



/**
 * 路由跳转到 所有大棚页面
 */
function gotoDapengPage(categoryCode){
  uni.navigateTo({
    url:"/pages/home/dapengchoose/dapengchoose?categoryCode="+categoryCode
  })
}


</script>

<style lang="scss">

.user-bar{
  background-color: #416c43;
  height: 520rpx;
  width: 690rpx;
  width: 100%;
  .duorou-title{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 210rpx;
    font-family: 'Arial', sans-serif; /* 设置字体 */
    font-size: 28px; /* 设置字体大小 */
    font-weight: bold; /* 设置字体粗细 */
    color: #FFFFFF; /* 设置字体颜色 */
    text-transform: uppercase; /* 设置文本为大写 */
    letter-spacing: 2px; /* 设置字符间距 */
    /*text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 设置文本阴影 */
  }
  .area-distribution{
    display: flex;
    height: 250rpx;
  }
  .small-title{
    display: flex;
    flex-direction: column;
    margin-left: 30rpx;
    font-family: 'Merriweather', serif; /* 设置元素字体 */
    font-size: 20px; /* 设置子元素字体大小 */
    font-weight: 700; /* 设置子元素字体粗细 */
    color: #FFFFFF; /* 设置子元素字体颜色 */
    text-transform: none; /* 取消子元素文本大写 */
    letter-spacing: normal; /* 取消子元素字符间距 */
    text-shadow: none; /* 取消子元素文本阴影 */
	margin-bottom: 5px;
  }
  .bottom{
    margin-top: 20rpx;
  }
}

/* 弹框样式 */
.uni-popup-dialog {
  width: 100% !important;
  max-width: 100% !important;
}

.uni-popup-dialog-title {
  font-size: 18px;
  font-weight: bold;
  color: #ff0000;
}

.uni-popup-dialog-content {
  font-size: 16px;
  padding: 10rpx;
}

/* 测试按钮样式 */
.test-button {
  position: fixed;
  bottom: 50px;
  right: 20px;
  z-index: 999;
}

.test-button button {
  background-color: #ff0000;
  color: white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 10px;
}

.menu-card-project{
  border-top-left-radius: 20px; /* 左上角圆角半径 */
  border-top-right-radius: 20px; /* 右上角圆角半径 */
  height: 400rpx;
  z-index: 2;
  position: relative;
  margin-top: -20rpx;
  background-color: #ffffff;
  .item {
    display: flex;
    flex-direction: row;  //水平放置
    height: 180rpx;
    z-index: 1;
    position: relative;
  }
  .item-inner{
    margin-top: 30rpx;
    width: 100%;
    display: flex;
    flex-direction: column;  //垂直放置
    align-items: center;
    justify-content: center;
  }
}

.swiper-container{
  width: 90%;
  height: 400rpx; /* 确保父容器有足够的高度 */
  display: flex;
  margin: 0 auto; /* 水平居中 */
  justify-content: center;
  align-items: center;
  z-index: 3;
  position: relative;
  border-top: 1px solid #ccc; /* 上边框 */
  border-bottom: 1px solid #ccc; /* 下边框 */
  .swiper {
    height: 300rpx;
    width: 100%;
  }
  .swiper-item {
    width: 100%;
    height: 300rpx;
    margin: 0 auto; /* 水平居中 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }
}

.tongji{
  z-index: 4;
  position: relative;
  .tonngjibingchonghai{
    margin-top: 20rpx;
    margin-left: 60rpx;
    font-family: 'Merriweather', sans-serif; /* 设置字体 */
    font-size: 22px; /* 设置字体大小 */
    font-weight: bold; /* 设置字体粗细 */
    text-transform: uppercase; /* 设置文本为大写 */
    letter-spacing: 2px; /* 设置字符间距 */
  }
  .charts-boxbingchong {
    width: 90%;
    height: 300px;
    margin: 0 auto; /* 水平居中 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }
}




</style>
